<template>
	<div class="header-watch">		
			<ul>
				<li class="watch-list" v-for="(item,index) in PlayList">
					<img :src="item.hotURL" />			
					<aside class="item-til">
						<p class="name">{{item.hottil}}</p>
						<p class="money">
							<span style="color: gray;font-size: 0.25rem;">{{item.lun}}</span>
						</p>
					</aside>
					<p class="dd">
						{{item.price}}<span class="span">&nbsp;&nbsp;元起</span>
					</p>
				</li>
			</ul>
	</div>
</template>

<script>
	export default{
		props:['PlayList'],
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped>
	.header-watch{
		width: 100%;
		background-color: white;
		font-size: 0.28rem;
		padding-bottom: 0.4rem;
	}
	.watch-top{
		line-height: 1rem;
		padding-left: 0.2rem;
		
	}
	.hert{
		color: orangered !important;
		font-size: 0.48rem;/* 24px */
		
	}
    .watch-list{
		display: flex;
		border-bottom: 1px solid #cccccc;
	}
	.watch-list img{
		width: 2rem;
		height: 2rem;
		position: relative;
		margin: 0.3rem 0rem;
		margin-left: 0.3rem;
		border-radius: 5px;
	}
	.item-til{
		margin-left: 0.2rem;
		text-align: left;
	}
	.dd{
		position: absolute;
		margin-top: 1.7rem;
		padding-left: 5.4rem;
		font-size: 0.30rem;
		color: orangered;
	}
	.name{
		position: absolute;
		margin-top: 0.5rem;
		font-size: 0.28rem;
		font-weight: bold;
		width: 62%;
	}
	.money{
		position: absolute;
		margin-top: 1.8rem;
	}
	.watch-til{
		font-weight: bold;
		font-size: 0.4rem;
		padding-left: 0.1rem;
	}
	.span{
		color: black;
		font-size: 0.25rem;
	}
	
</style>
